<template>
  <div class="w-100">
    <div class="container">
      <el-breadcrumb separator="/" class="my-2">
        <el-breadcrumb-item :to="{ path: Home }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>详情</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="row mt-3" style="--bs-gutter-y: 1rem">
        <div v-for="(item, index) in info.children" :key="index" class="col-12 col-lg-4">
          <div class="ratio ratio-4x3">
            <img :src="item.imgUrl" alt="图片加载失败">
          </div>
        </div>
      </div>
      <div class="operation">
        <el-button @click="dian">点赞</el-button>
        <el-button @click="dian">本地收藏</el-button>
        <el-button @click="dian">分享</el-button>
      </div>
      <div class="row">
        <div>评论区</div>
        <div>
          <div>好好看</div>
          <div>123</div>
        </div>
      </div>

      <el-form class="w-100">
        <textarea class="w-100"></textarea>
      </el-form>
    </div>
  </div>
</template>

<script>
import {Img_getInfo} from "@/api/api";
import {getJson} from "@/api/http";
import {Home} from "@/index";

export default {
  name: "InfoComponent",
  data() {
    return {
      id: this.$route.query.id,
      info: null,
      Home,
    }
  },
  methods: {
    async init() {
      let data = {
        id: this.id
      }
      let infoR = await getJson(Img_getInfo, data)
      this.info = infoR.data
    },
    async dian() {

    },
  },
  created() {
    this.init()
  }
}
</script>

<style scoped lang="less">
.operation {
  display: flex;
  justify-content: center;
}
</style>